import React, { Component } from 'react'
import { Tabs ,Row, Col, Badge} from 'antd';
import message from './Message.module.css'
import http from '../../util/http'
import * as url from '../../util/api'
const { TabPane } = Tabs;
export default class Message extends Component {
    constructor(props) {
        super(props)
        this.state = {
            // message: [
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-04-16 09:36:54', isRead: 1 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-02-16 09:36:54', isRead: 1 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-03-16 09:36:54', isRead: 1 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-01-16 09:36:54', isRead: 1 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-05-16 09:36:54', isRead: 1 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-06-16 09:36:54', isRead: 1 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-07-16 09:36:54', isRead: 0 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-08-16 09:36:54', isRead: 0 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-09-16 09:36:54', isRead: 0 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-10-16 09:36:54', isRead: 0 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-11-16 09:36:54', isRead: 0 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-12-16 09:36:54', isRead: 0 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-04-23 09:36:54', isRead: 0 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-04-14 09:36:54', isRead: 0 },
            //     { content: 'adsklndjavwa.nvjasnlakmva', time: '2020-04-17 09:36:54', isRead: 0 },
            // ],
            showBusiness:true,
            showSystem:false,
            showUpgrade:false,
        }
    }
    componentDidMount(){
        http({
            url:url.getBusinessMessage,
            method:'get'
        }).then(res=>{
            console.log(res.data)
            let count = 0
            for(let i = 0; i < res.data.length; i++){
                if(!res.data[i].isRead){
                    count ++;
                }
            }

           this.setState({
               businessList:res.data,
               businessCount:count
           })
        })
        http({
            url:url.getSystemMessage,
            method:'get'
        }).then(res=>{
            console.log(res.data)
            let count = 0
            for(let i = 0; i < res.data.length; i++){
                if(!res.data[i].isRead){
                    count ++;
                }
            }

           this.setState({
               systemList:res.data,
               systemCount:count
           })
        })
        http({
            url:url.getUpgradeMessage,
            method:'get'
        }).then(res=>{
            console.log(res.data)
            let count = 0
            for(let i = 0; i < res.data.length; i++){
                if(!res.data[i].isRead){
                    count ++;
                }
            }

           this.setState({
               upgradeList:res.data,
               upgradeCount:count
           })
        })
    }
    handelChangeTab(type){
        switch (type){
            case 'business':
            http({
                url:url.getBusinessMessage,
                method:'get'
            }).then(res=>{
                console.log(res.data)
                let count = 0
                for(let i = 0; i < res.data.length; i++){
                    if(!res.data[i].isRead){
                        count ++;
                    }
                }
                this.setState({
                    businessList:res.data,
                    showBusiness:true,
                    showSystem:false,
                    showUpgrade:false,
                    businessCount:count,
                })
            })    
                break;
            case 'system':
                http({
                    url:url.getSystemMessage,
                    method:'get'
                }).then(res=>{
                    console.log(res.data)
                    let count = 0
                    for(let i = 0; i < res.data.length; i++){
                        if(!res.data[i].isRead){
                            count ++;
                        }
                    }
                    this.setState({
                        systemList:res.data,
                        showBusiness:false,
                        showSystem:true,
                        showUpgrade:false,
                        systemCount:count,
                    })
                })  
                break;
            case 'upgrade':
                http({
                    url:url.getUpgradeMessage,
                    method:'get'
                }).then(res=>{
                    console.log(res.data)
                    let count = 0
                    for(let i = 0; i < res.data.length; i++){
                        if(!res.data[i].isRead){
                            count ++;
                        }
                    }
                    this.setState({
                        upgradeList:res.data,
                        showBusiness:false,
                        showSystem:false,
                        showUpgrade:true,
                        upgradeCount:count,
                    })
                })  
                break;
        }
    }
    render() {
        return (
            <div className = {message.contentBox}>
                <Row>
                    <Col span = {8} className = {[`${this.state.showBusiness?message.active:message.tabItem}`].join(' ')}>
                        <button onClick = {()=>{this.handelChangeTab('business')}} className = {message.tabName}>业务消息</button>
                        <Badge count={this.state.businessCount}  style={{ backgroundColor: '#4dcfae' }} />
                    </Col>
                    <Col span = {8} className = {[`${this.state.showSystem?message.active:message.tabItem}`].join(' ')}>
                        <button onClick = {()=>{this.handelChangeTab('system')}} className = {message.tabName}>系统公告</button>
                        <Badge count={this.state.systemCount}  style={{ backgroundColor: '#4dcfae' }} />
                    </Col>
                    <Col span = {8} className = {[`${this.state.showUpgrade?message.active:message.tabItem}`].join(' ')}>
                        <button onClick = {()=>{this.handelChangeTab('upgrade')}} className = {message.tabName}>升级公告</button>
                        <Badge count={this.state.upgradeCount}  style={{ backgroundColor: '#4dcfae' }} />
                    </Col>
                </Row>
                    {this.state.showBusiness ? (this.state.businessList ? this.state.businessList.map(item => <div className = {message.content} key = {item.time}>
                        <p className = {message.title}>
                            {(item.isRead === 0 ? false:true)?<span className = {message.circle}></span>:null}
                            {item.content}
                        </p>
                        <p className = {message.time}>
                            {item.time}
                        </p>
                    </div>):null):null }
                    {this.state.showSystem ? (this.state.systemList ? this.state.systemList.map(item => <div className = {message.content} key = {item.time}>
                        <p className = {message.title}>
                            {(item.isRead === 0 ? false:true)?<span className = {message.circle}></span>:null}
                            {item.content}
                        </p>
                        <p className = {message.time}>
                            {item.time}
                        </p>
                    </div>):null):null }
                    {this.state.showUpgrade ? (this.state.upgradeList ? this.state.upgradeList.map(item => <div className = {message.content} key = {item.time}>
                        <p className = {message.title}>
                            {(item.isRead === 0 ? false:true)?<span className = {message.circle}></span>:null}
                            {item.content}
                        </p>
                        <p className = {message.time}>
                            {item.time}
                        </p>
                    </div>):null):null } 
                {/* <Row className = {message.operateBox}>
                    <Col span = {12} className={message.test}> <button className = {message.btn}>全部标记为已读</button></Col>
                    <Col span = {12}> <button className = {message.btn}>加载更多</button></Col>
                   
                   
                </Row> */}
            </div>
        )
    }
}
